import React, { useEffect, useRef } from 'react'
import { connect } from 'react-redux'
import {incrementCount,decrementCount, userLogin} from './../store/actions'
import {useNavigate} from 'react-router-dom'

//login做为一个 ui组件，接受 props，只负责页面内容的渲染，不负责逻辑的处理。
// 逻辑的处理，交由容器组件
 function Login(props) {
    const ref1 = useRef(null)
    const ref2 = useRef(null)
    const navigate = useNavigate()
    // console.log(useSelector(state=>state))  // 100
    // // state\方法，写在组件里面。
    // const loginHandler = ()=>{
    //     navigate("/home")
    // }

    console.log("login's props:", props)
    const {count, add, jia, login, loginState} = props;

    // 由于 action里面，不能跳转页面。
    // 所以要做一个useEffect的依赖监听

    useEffect(()=>{
      if(loginState)navigate("/home")
    },[loginState])
  return (
    <div>
      <h1>欢迎使用xxx火星移民系统</h1>
      Account: <input type="text" ref={ref1} placeholder='请输入账号' /> <br />
      PassWord: <input type="text" ref={ref2}  placeholder='请输入密码' /> <br />
      <button type='button' onClick={()=>{
        login(ref1.current.value, ref2.current.value)
      }}>登录</button>

      <hr />
      <div>
         <button type='button' onClick={()=>{
         add(100)
         }}>增加:count: {count} </button>

<button type='button' onClick={()=>{
         jia(100)
         }}>减少：count: {count} </button>
      </div>
    </div>
  )
}

const mapStateToProps = (state, ownProps)=>{
  // console.log(state) // stroe: {count, loginState,...}
  // console.log(ownProps)  // {a:"123"}
  // return 返回的对象，会结构到 login 组件的props里面。
  return {
    count: state.count,
    userInfo: state.userInfo,
    loginState: state.loginState
  }
}

const mapDispatchToProps = (dispatch, ownProps)=>{
  // console.log(dispatch)
  return {
    add: (num)=> dispatch(incrementCount(num)),
    jia: (num)=> dispatch(decrementCount(num)),
    login: (username, password)=>{
      // 调用异步的aciotn，参数是一个对象， 参数的属性名就是接口的参数名
      // console.log(username, password);
      dispatch(userLogin({username, password}))
    }
  }
}


export default connect(mapStateToProps,mapDispatchToProps)(Login)
/* 
connect函数调用后，返回一个容器组件(hoc组件)，调用hoc组件，并传UI组件做参数，返回一个新的组件回来；
 connect( mapStateToProps , mapDispatchToProps ), mapDispatchToProps不传时，默认把dispatch()注入到组件的props中。
*/

// const connect = (fn1,fn2)=>{

//   let obj = fn1()
//   return (component)=>{

//     return (
//       <div>
//         <component {...obj} />
//       </div>
//     )
//   }
// }